<template>
  <div class="container">
    <div class="card">
      <h1>垂直滚动</h1>
      <Vue3Scroll :hover="true" :step="10">
        <div>
          <h3 v-for="value in dataList" :key="value.id">{{ value.name }}</h3>
        </div>
      </Vue3Scroll>
    </div>
    <div class="card">
      <h1>水平滚动</h1>
      <Vue3Scroll :hover="true" :step="10" horizontal>
        <div class="horizontal">
          <h3 v-for="value in dataList" :key="value.id">{{ value.name }}</h3>
        </div>
      </Vue3Scroll>
    </div>
  </div>
</template>
<script setup lang="ts">
import Vue3Scroll from "../lib/vue3-scroll-animation/index.vue";
import { ref } from "vue";

const dataList = ref([
  {
    id: 1,
    name: "张三",
  },
  {
    id: 2,
    name: "李四",
  },
  ...Array.from({ length: 100 }).map((_, index) => {
    return {
      id: index + 3,
      name: `用户${index + 3}`,
    };
  }),
]);
</script>
<style scoped>
.container {
  display: flex;
}
.card {
  width: 50vw;
  height: 500px;
}
.horizontal {
  display: flex;
  word-spacing: normal;
  white-space: nowrap;
}
</style>
